<template>
  <div class="map">
    <!-- <img src="/loge.webp" /> -->
    <ECharts
      class="geo-map"
      :option="option"
      autoresize
      @mouseover="onMouseover"
      @mouseout="onMouseout"
      @globalout="onGlobalout"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import * as echarts from "echarts";
import chinaJson from "@/assets/map/china.json"; // 地图数据文件（需自行获取）
import "echarts-gl";
// 注册地理坐标系
echarts.registerMap("china3d", chinaJson);

//往父元素发送每个省的数据
const emit = defineEmits(["onChangeData"]);

//鼠标进入地图每个省份的监听事件
const onMouseover = (e) => {
  //不触发南海诸岛
  //悬停省份变高
  const sheng = geoData.value.filter((event) => {
    return event.name === e.data.name;
  });
  sheng[0].height = 5;

  if (e.data.name === "南海诸岛") return;
  emit("onChangeData", e.data);
};

const onMouseout = (e) => {
  const shengDel = geoData.value.filter((event) => {
    return event?.height > 3;
  });
  shengDel.forEach((e) => {
    e.height = 3;
  });
  // shengDel.length > 0 && (shengDel[0].height = 3)

  //不触发南海诸岛
  const sheng = geoData.value.filter((event) => {
    return event.name === e.data.name;
  });
  sheng[0].height = 3;

  if (e.data.name === "南海诸岛") return;
  emit("onChangeData", mouseoutData.value);
};

//鼠标移出地图
const onGlobalout = (e) => {
  const sheng = geoData.value.filter((event) => {
    return event?.height > 3;
  });

  sheng.forEach((item) => {
    item.height = 3;
  });

  // sheng.length === 1 && (sheng[0].height = 3)
  // if (e.data.name === "南海诸岛") return;
  emit("onChangeData", mouseoutData.value);
};

// 成就   achievement
// 科学家 scientist
// 著作   book
// 文化   culture

// 模拟数据（需与地图中的省份名称严格一致）
const geoData = ref([
  // 直辖市
  {
    name: "北京市",
    value: 95,
    achievement: 20,
    scientist: 958,
    book: 4000,
    culture: 6000,
    img: "./map/image/beijing.jpg",
    text: "与郭守敬共同主持《授时历》编订，首创“三次差内插法”计算日月运动轨迹，误差较前代缩小10倍。",
    title: "王恂",
    height: 3,
  }, // 图片必须放在public目录里才能被访问到
  {
    name: "上海市",
    value: 88,
    achievement: 30,
    scientist: 1,
    book: 458,
    culture: 139,
    height: 3,
    img: "./map/image/shanghai.jpg",
    text: "著《农政全书》，总结江南地区“棉稻轮作制”，推广甘薯抗旱种植。主持崇祯历局，引入第谷·布拉赫天文体系，测算北京经纬度（误差<0.1°）。",
    title: "徐光启",
  },
  {
    name: "天津市",
    value: 78,
    achievement: 60,
    scientist: 1,
    book: 485,
    culture: 339,
    height: 3,
    img: "./map/image/tianjin.jpg",
    text: "与傅兰雅合译《金石识别》（1872年），首次系统引入西方矿物学分类体系（如金属、非金属、宝石类）。著《行素轩算稿》，解析微积分与概率论原理",
    title: "华蘅芳",
  },
  {
    name: "重庆市",
    value: 72,
    achievement: 280,
    scientist: 1,
    book: 418,
    culture: 349,
    height: 3,
    img: "./map/image/chongqing.jpg",
    text: "将《周易》象数理论与数学结合，影响秦九韶“大衍求一术”。培养涪陵学派，传播河洛数理思想。",
    title: "谯定",
  },

  // 省份（按地理区域分组）
  // 东北地区
  {
    name: "黑龙江省",
    value: 68,
    achievement: 240,
    scientist: 1,
    book: 448,
    culture: 839,
    img: "./map/image/heilongjiang.jpg",
    text: "大祚荣是黑龙江地区可以追溯到的最早的一位名人，被冠以“海东盛王”之称。",
    title: "大祚荣",
    height: 3,
  },
  {
    name: "吉林省",
    value: 65,
    achievement: 280,
    scientist: 1,
    book: 48,
    culture: 319,
    height: 3,
    img: "./map/image/jilin.jpg",
    text: "这是佛教典籍丛书《大藏经》的一种重要版本，几乎囊括了佛教经、律、论三藏及其相关的一切资料，是佛教典籍中的瑰宝。吉林省图书馆藏有此书",
    title: "《永乐南藏》",
  },
  {
    name: "辽宁省",
    value: 70,
    achievement: 240,
    scientist: 1,
    book: 484,
    culture: 539,
    height: 3,
    img: "./map/image/liaoning.jpg",
    text: "明代一部重要的地方志，详细记载了辽东地区的地理、历史、政治、经济、文化等内容。",
    title: "《辽东志》",
  },

  // 华北地区
  {
    name: "河北省",
    value: 75,
    achievement: 720,
    scientist: 10,
    book: 28,
    culture: 349,
    height: 3,
    img: "./map/image/hebei.jpg",
    text: "推算圆周率至3.1415926-3.1415927，著《缀术》（已佚）提出高次方程数值解法。设计“千里船”（日行百里），改良水碓磨提高粮食加工效率。",
    title: "祖冲之",
  },
  {
    name: "山西省",
    value: 63,
    achievement: 270,
    scientist: 1,
    book: 15,
    culture: 349,
    height: 3,
    img: "./map/image/shanxi.jpg",
    text: "提出“制图六体”（比例尺、方位、距离、高程、坡度、曲直），奠定中国古代地图学基础。绘制《禹贡地域图》18幅，复原西周至魏晋地理变迁。 ",
    title: "裴秀",
  },
  {
    name: "内蒙古自治区",
    value: 60,
    achievement: 208,
    scientist: 1,
    book: 428,
    culture: 319,
    height: 3,
    img: "./map/image/neimenggu.png",
    text: "清代数学家、天文学家，著《割圆密率捷法》，独创“九术”解析圆周率与三角函数，解决法国传教士遗留的数学难题，被李善兰誉为“中算之光”",
    title: "明安图",
  },

  // 华东地区
  {
    name: "江苏省",
    value: 85,
    achievement: 207,
    scientist: 8,
    book: 25,
    culture: 319,
    height: 3,
    img: "./map/image/jiangsu.jpg",
    text: "发现声共振现象：“虚能纳声”（空腔扩音原理）。记录胆水炼铜法（硫酸铜溶液浸铁成铜），早西方湿法冶金500年。",
    title: "沈括",
  },
  {
    name: "浙江省",
    value: 82,
    achievement: 240,
    scientist: 9,
    book: 22,
    culture: 329,
    height: 3,
    img: "./map/image/zhejiang.jpg",
    text: "提出“相火论”，认为“火动则煎熬真阴”，需滋阴降火。创制大补阴丸（黄柏、知母、熟地黄），沿用至今治疗阴虚火旺。",
    title: "朱震亨",
  },
  {
    name: "安徽省",
    value: 73,
    achievement: 210,
    scientist: 3,
    book: 14,
    culture: 339,
    height: 3,
    img: "./map/image/anhui.jpg",
    text: "著《历学疑问》，论证中国古代历法与西历的兼容性。用传统勾股术证明《几何原本》命题40余条。",
    title: "梅文鼎",
  },
  {
    name: "福建省",
    value: 77,
    achievement: 420,
    scientist: 1,
    book: 10,
    culture: 349,
    height: 3,
    img: "./map/image/fujian.jpg",
    text: "发明水运仪象台，整合浑仪、浑象与报时装置，采用擒纵器控制流速（现代机械钟鼻祖）。编《本草图经》，首绘药物写生图谱（如人参、三七）。",
    title: "苏颂",
  },
  {
    name: "江西省",
    value: 69,
    achievement: 270,
    scientist: 2,
    book: 8,
    culture: 399,
    height: 3,
    img: "./map/image/jiangxi.jpg",
    text: "记录“生铁淋口”技术（农具刃口渗碳硬化），成本仅为包钢法1/10。详述“花机”结构，可织复杂提花绸缎（需两人配合，一人提综，一人投梭）。 ",
    title: "宋应星",
  },
  {
    name: "山东省",
    value: 80,
    achievement: 250,
    scientist: 5,
    book: 32,
    culture: 739,
    height: 3,
    img: "./map/image/shandong.jpg",
    text: "与石申合著《甘石星经》，标定121颗恒星赤道坐标（误差±1.5°）。发现木星卫星（疑似木卫三），比伽利略早2000年（争议）。",
    title: "甘德",
  },

  // 华中地区
  {
    name: "河南省",
    value: 76,
    achievement: 270,
    scientist: 7,
    book: 38,
    culture: 379,
    height: 3,
    img: "./map/image/henan.jpg",
    text: "候风地动仪含8个方位龙口衔珠，陇西地震触发西方龙珠落入蟾蜍（实测距离约600公里）。提出“浑天说”，认为“天体圆如弹丸，地如鸡中黄”。",
    title: "张衡",
  },
  {
    name: "湖北省",
    value: 74,
    achievement: 240,
    scientist: 4,
    book: 18,
    culture: 356,
    height: 3,
    img: "./map/image/hubei.jpg",
    text: "按自然属性分16部60类（如草部、虫部），比林奈系统早150年。通过实验验证曼陀罗花麻醉效果：“笑采酿酒饮，令人笑；舞采酿酒饮，令人舞”。 ",
    title: "李时珍",
  },
  {
    name: "湖南省",
    value: 71,
    achievement: 280,
    scientist: 1,
    book: 12,
    culture: 394,
    height: 3,
    img: "./map/image/hunan.jpg",
    text: "突破性使用树皮（楮皮）、麻头、破布为原料，碱液蒸煮脱胶，抄纸帘模定型。",
    title: "蔡伦",
  },

  // 华南地区
  {
    name: "广东省",
    value: 90,
    achievement: 280,
    scientist: 1,
    book: 6,
    culture: 39,
    height: 3,
    img: "./map/image/guangdong.jpg",
    text: "自制摄影器“写真镜”（1844年），用湿版法拍摄人像，曝光时间缩至15分钟。改进“日晷画法”，解决广府地区磁偏角（-2°）对日影的影响。",
    title: "邹伯奇",
  }, // 经济大省数值较高
  {
    name: "广西壮族自治区",
    value: 67,
    achievement: 204,
    scientist: 1,
    book: 468,
    culture: 139,
    height: 3,
    img: "./map/image/guangxi.jpg",
    text: "收集壮药方剂如田七止血散、蛤蚧壮阳汤，载入《岭西纪闻》。创制“狼兵行军散”（藿香、苍术、雄黄）防治南方瘴疟。",
    title: "瓦氏夫人",
  },
  {
    name: "海南省",
    value: 30,
    achievement: 270,
    scientist: 1,
    book: 438,
    culture: 359,
    height: 3,
    img: "./map/image/hainan.jpg",
    text: "提出“海田可耕”理论，主张开发滩涂种植红树林固沙。著《大学衍义补》，分析海运对南北物资流通的作用。",
    title: "丘濬",
  },

  // 西南地区
  {
    name: "四川省",
    value: 75,
    achievement: 210,
    scientist: 3,
    book: 9,
    culture: 339,
    height: 3,
    img: "./map/image/sichuan.jpg",
    text: "创立“大衍求一术”，解决同余式组问题（现代密码学基础）。提出“三斜求积”公式，应用于田亩测量（公式等价于海伦公式）。",
    title: "秦九韶",
  },
  {
    name: "贵州省",
    value: 64,
    achievement: 230,
    scientist: 1,
    book: 448,
    culture: 739,
    height: 3,
    img: "./map/image/guizhou.jpg",
    text: "著《淮海易谈》，用卦象解释四季变化（如“震为春，离为夏”）。在清平卫（今凯里）建学宫，传播天文历算知识。",
    title: "孙应鳌",
  },
  {
    name: "云南省",
    value: 66,
    achievement: 280,
    scientist: 1,
    book: 428,
    culture: 392,
    height: 3,
    img: "./map/image/yunnan.jpg",
    text: "著《滇南本草》，收录云南特有药物如三七、虫草，附彩色手绘图谱。创“兰氏解毒汤”（重楼、金银花）治疗瘴气中毒。 ",
    title: "兰茂",
  },
  {
    name: "西藏自治区",
    value: 58,
    achievement: 780,
    scientist: 1,
    book: 489,
    culture: 349,
    height: 3,
    img: "./map/image/xizang.png",
    text: "编《四部医典》，确立“隆”“赤巴”“培根”三因平衡理论。记载金针拔障术（白内障治疗），使用青稞酒消毒器械。",
    title: "宇妥·元丹贡布",
  }, // 高原地区数值较低

  // 西北地区
  {
    name: "陕西省",
    value: 70,
    achievement: 210,
    scientist: 2,
    book: 20,
    culture: 739,
    height: 3,
    img: "./map/image/Sshanxi.jpg",
    text: "创葱管导尿术，早西方橡胶导尿管1200年。主张“食疗为先”，记载动物肝脏治夜盲（维生素A缺乏症）。",
    title: "孙思邈",
  },
  {
    name: "甘肃省",
    value: 63,
    achievement: 720,
    scientist: 1,
    book: 458,
    culture: 398,
    height: 3,
    img: "./map/image/gansu.jpg",
    text: "规范349个穴位名称与位置，规定针刺深度（如“中脘穴入八分”）。整理《黄帝针灸甲乙经》，保存大量魏晋前针灸文献。",
    title: "皇甫谧",
  },
  {
    name: "青海省",
    value: 59,
    achievement: 920,
    scientist: 1,
    book: 486,
    culture: 389,
    height: 3,
    img: "./map/image/qinghai.jpg",
    text: "在塔尔寺设“曼巴扎仓”（医学院），系统教授药物辨识与脉诊。编《晶珠本草》，收录青海高原特有药物如雪莲、牦牛角。",
    title: "宗喀巴",
  },
  {
    name: "宁夏回族自治区",
    value: 61,
    achievement: 210,
    scientist: 1,
    book: 478,
    culture: 359,
    height: 3,
    img: "./map/image/ningxia.png",
    text: "造“西域仪象”（地球仪），标7条气候带与欧亚主要城市。编《万年历》，首次将回历与汉历对照，供穆斯林使用。",
    title: "札马鲁丁",
  },
  {
    name: "新疆维吾尔自治区",
    value: 65,
    achievement: 220,
    scientist: 1,
    book: 468,
    culture: 379,
    height: 3,
    img: "./map/image/xinjiang.jpg",
    text: "是唐代玄奘口述、弟子辩机编撰的地理史籍，共12卷。它详细记录了玄奘西行途中138个国家和地区的地理、社会、文化、宗教等情况，包括自然环境、风俗习惯、佛教遗迹等。",
    title: "《大唐西域记》",
  },
  {
    name: "南海诸岛",
    value: 0,
    achievement: 0,
    scientist: 0,
    book: 0,
    culture: 0,
    height: 3,
    itemStyle: {
      color: "#fff",
      opacity: 1,
    },
  }, //改成透明的

  // 特别行政区
  {
    name: "香港特别行政区",
    value: 83,
    achievement: 270,
    scientist: 1,
    book: 418,
    culture: 349,
    height: 3,
    img: "./map/image/xianggang.jpg",
    text: "著《赤雅》，记录香港地区潮汐规律与海产捕捞技术。",
    title: "邝露",
  }, // 国际金融中心
  {
    name: "澳门特别行政区",
    value: 79,
    achievement: 260,
    scientist: 1,
    book: 468,
    culture: 339,
    height: 3,
    img: "./map/image/aomen.jpg",
    text: "江苏常熟，晚年居澳门,在《三巴集》中详述西洋自鸣钟结构，并尝试用齿轮原理改制中式更漏。",
    title: "吴历",
  },
  {
    name: "台湾省",
    value: 73,
    achievement: 220,
    scientist: 1,
    book: 484,
    culture: 398,
    height: 3,
    img: "./map/image/taiwan.png",
    text: "记录大屯火山群硫磺矿成因：“石隙间有磺气蒸腾，嗅之作蛋臭”。详述平埔族用芭蕉叶止血、竹管吸毒等医疗技术。",
    title: "郁永河",
  }, // 根据业务需求决定是否包含
]);

//计算全国科学成就数量
const nationalAchievement = computed(() =>
  geoData.value.reduce(
    (accumulator, currentValue) => accumulator + currentValue.achievement,
    0
  )
);

//计算全国科学家
const nationalScientist = computed(() =>
  geoData.value.reduce(
    (accumulator, currentValue) => accumulator + currentValue.scientist,
    0
  )
);

//计算全国科学著作
const nationalBook = computed(() =>
  geoData.value.reduce(
    (accumulator, currentValue) => accumulator + currentValue.book,
    0
  )
);

//计算全国优秀文化数量
const nationalCulture = computed(() =>
  geoData.value.reduce(
    (accumulator, currentValue) => accumulator + currentValue.culture,
    0
  )
);

//鼠标离开地图每个省份的监听事件
const mouseoutData = ref({
  isNational: true,
  nationalAchievement: nationalAchievement.value,
  nationalScientist: nationalScientist.value,
  nationalBook: nationalBook.value,
  nationalCulture: nationalCulture.value,
});

//已进入就往父级发送数据
onMounted(() => {
  // 延迟执行确保地图加载完成
  // setTimeout(() => {
  //   // 更新为最终视角
  //   option.value = {
  //     ...option.value,
  //     series: [
  //       {
  //         ...option.value.series[0],
  //         viewControl: {
  //           ...option.value.series[0].viewControl,
  //           beta: 17, // 目标方位角
  //           alpha: 40, // 目标俯仰角
  //           distance: 100, // 目标距离
  //         },
  //       },
  //     ],
  //   };

  // }, 100);
  emit("onChangeData", mouseoutData.value);
});
// 主配置项
const option = ref({
  // 视觉映射组件
  visualMap: {
    hoverLink: false, // 添加此项
    // type: "continuous", // 连续型映射
    type: "piecewise", // 分段型视觉映射
    min: 0,
    max: 100,
    left: "right",
    top: "center",
    text: ["高", "低"],
    calculable: true,
    inRange: {
      color: ["#eee", "rgb(255,235,190)"], // ffe1cc颜色渐变
    },
  },

  // 提示框配置
  tooltip: {
    trigger: "item",
    formatter: (params) => {
      const data = geoData.value.find((d) => d.name === params.name);
      // console.log(data);
      if (params.data.name === "南海诸岛") return; //进入南海诸岛不往下执行
      //图片都要放在assets文件夹里
      return `
            <div style="max-width: 170px">
                <div style="display: flex; align-items: center">
                  <img 
                  style="width: 30px; height: 30px; margin-right: 5px; 
                  "src="${data.img}"/>
                  <text 
                  style="font-size: 18px; color: #1890ff ;
                    max-width: 100%;
                    word-break: break-all;
                    overflow-wrap: break-word;
                    white-space: normal;
                    min-width: 0;
                    line-break: anywhere;
                  "
                  >${data.title}</text>
                </div>
                <hr style="margin: 5px 0; border-color: #666" />
                <div
                  style="
                    max-width: 100%;
                    word-break: break-all;
                    overflow-wrap: break-word;
                    white-space: normal;
                    min-width: 0;
                    line-break: anywhere;
                  "
                  >
                  ${data.text}
                </div>
            </div>
        `;
    },
  },
  series: [
    // 必须包裹在series数组中
    {
      type: "map3D",
      map: "china3d",
      // animationDuration: 3000,
      // animationEasing: "cubicInOut",
      // 新增光照系统配置 (核心修改)
      // 方法 2：自定义区域缩放（需地图数据支持）

      light: {
        main: {
          intensity: 0.4, // 主光源强度增强
          alpha: 45, // 水平角度（右上方来光）
          beta: 100, // 俯角（斜上方照射）
          shadow: true, // 启用阴影
          shadowQuality: "high", // 高清阴影
          shadowSoftness: 0.5, // 阴影柔化系数
          shadowColor: "rgba(50,50,50,0.4)", // 阴影颜色调整
          shadowSize: 15, // 模糊度控制
        },
        ambient: {
          color: "#fff",
          intensity: 0.6, // 环境光适当降低以增加对比
        },
      },
      // regionHeight: 3, // 区域立体高度
      // 视图控制（核心参数）
      viewControl: {
        // 初始角度设置为背面（180度）
        // beta: 180, // 初始方位角
        // alpha: 60, // 初始俯仰角（稍微俯视）
        // distance: 150, // 初始距离
        beta: 10, // 目标方位角
        alpha: 70, // 目标俯仰角
        // distance: 100, // 目标距离
        center: [8, 0, 15], //x,y,z调整地图的位置和缩放

        // 动画配置
        // animation: true,
        // animationDurationUpdate: 3000,
        // animationEasingUpdate: "cubicInOut",
      },
      // aspectScale: 1, // 保持原始比例（解除注释）
      // projection: "orthographic", // 使用正交投影（消除透视变形）
      // 数据绑定修正
      data: geoData.value,
      // aspectScale: 0.9, // 控制地图长宽比（0-1）
      // 材质系统重配
      shading: "realistic",
      realisticMaterial: {
        roughness: 0.65, // 磨砂质感 (0-1)
        metalness: 0.05, // 轻微金属感
      },

      // 模型细节优化
      // regionHeight: 2.5, // 区域高度微调
      // groundPlane: {
      //   show: true, // 显示地面投影平面
      //   // color: "rgba(255,235,190,0.1)", // 背景底色
      //   blur: 10, // 地面模糊度
      // },
      surfaceLayers: [
        {
          type: "bloom", // 添加泛光层
          intensity: 0.2,
        },
      ],

      // 视觉样式优化
      itemStyle: {
        borderColor: "rgba(255,255,255,0.5)", // 半透明边框
        borderWidth: 0.8,
        // 光照响应增强
        lightArea: {
          color: "rgba(255,235,190,0.8)", // 受光面颜色
          intensity: 0.6,
        },
        shadowArea: {
          color: "rgba(50,50,50,0.5)", // 背光阴影颜色
          intensity: 0.8,
        },
      },
      // 高亮样式 -----------------------------
      emphasis: {
        itemStyle: {
          color: "rgb(255,235,190)",
        },
        // 悬停样式
        label: {
          show: true,
          color: "#000",
          borderColor: "#fff",
          fontSize: 14,
        },
      },
    },
  ],
});
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;

  // background: #50c014;
  .geo-map {
    padding-top: 60px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
}
</style>
